<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drag demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        #app {
            position: relative;
            width: 100%;
            height: 100%;
            max-width: 980px;
            margin: auto;
        }

        .list {
            padding: 10px;
            height: 20px;
            border-bottom: 1px solid #ddd;
        }

        #recycle {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 70px;
            line-height: 70px;
            text-align: center;
            background: #ddd;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="main">
            <div class="list" draggable="true">这里是列表1的标题</div>
            <div class="list" draggable="true">这里是列表2的标题</div>
            <div class="list" draggable="true">这里是列表3的标题</div>
            <div class="list" draggable="true">这里是列表4的标题</div>
            <div class="list" draggable="true">这里是列表5的标题</div>
            <div class="list" draggable="true">这里是列表6的标题</div>
            <div class="list" draggable="true">这里是列表7的标题</div>
        </div>
        <div style="width:800px;height: 200px;">
            <table style="border-collapse:collapse;font-family: Helvetica Neue,Helvetica,Arial;font-size:14px;width:100%;height:100%">
                <tbody>
                    <tr>
                        <td align="center" valign="top">
                            <table style="border:1px solid #ececec;border-top:none; max-width:600px;border-collapse:collapse">
                                <tbody>
                                    <tr>
                                        <td>内容1</td>
                                        <td>内容1</td>
                                        <td>内容1</td>
                                    </tr>
                                    <tr>
                                        <td>内容2</td>
                                        <td>内容2</td>
                                        <td>内容2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            <img src="about:blank" alt=""><a href="about:blank;">点击</a>
        </div>
        

        <div id="recycle">回收站</div>
    </div>
    <script>
        var iosDragDropShim = {
            enableEnterLeave: true
        } // 兼容移动端
        var source = document.querySelectorAll('.list'),
            recycle = document.getElementById('recycle'),
            dragElement = null, // 用于存放拖动元素
            lock = true; // 最后元素拖放拖放时会进入enter和leave的循环，用来锁住

        for (var i = 0; i < source.length; i++) {
            source[i].addEventListener('dragstart', function (ev) {
                dragElement = this; // 用于存放拖动元素
                this.style.backgroundColor = '#f8f8f8'; // 设置拖动元素的背景
            }, false);

            source[i].addEventListener('dragend', function (ev) {
                ev.target.style.backgroundColor = '#fff'; // 拖放结束还原拖动元素的背景
                ev.preventDefault();
            }, false)

            source[i].addEventListener('dragenter', function (ev) {
                if (dragElement != this) {
                    this.parentNode.insertBefore(dragElement, this); // 把拖动元素添加到当前元素的前面
                }
            }, false)

            source[i].addEventListener('dragleave', function (ev) {
                console.log(111);
                if (dragElement != this) {
                    if (lock && (this == this.parentNode.lastElementChild || this == this.parentNode.lastChild)) { // 当前元素时最后一个元素
                        this.parentNode.appendChild(dragElement); // 把拖动元素添加最后面
                        lock = false;
                    } else {
                        lock = true;
                    }
                }
            }, false)
        };

        recycle.addEventListener('drop', function (ev) { // 拖进回收站则删除该元素
            dragElement.parentNode.removeChild(dragElement);
        }, false)

        document.ondragover = function (e) {
            e.preventDefault();
        } // 必须设置dragover阻止默认事件
        document.ondrop = function (e) {
            e.preventDefault();
        }
    </script>
    <script src="http://timruffles.github.io/ios-html5-drag-drop-shim/ios-drag-drop.js"></script>

</body>

</html>